<!--
 * @Author: Suns
 * @Date: 2020-05-15 17:06:49
 * @LastEditTime: 2020-11-25 17:19:26
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta name="robots" content="index,follow" />
    <meta name="referrer" content="never" />
    <meta name="author" content="sunscheung, sunscheung@163.com" />
    <% if(htmlWebpackPlugin.options.config.header) { %>
    <link rel="stylesheet" type="text/css" href="./mock/css/header.css" />
    <% } %>
    <!--[if lte IE 9]>
      <script>
        window.location.href =
          "https://support.dmeng.net/upgrade-your-browser.html?referrer=" +
          encodeURIComponent(window.location.href);
      </script>
    <![endif]-->
  </head>
  <body>
    <noscript>
      <strong>
        We're sorry but v3 doesn't work properly without JavaScript enabled.
        Please enable it to continue.
      </strong>
    </noscript>
    这是一个修改后的文件
    <img
      id="imgUrl"
      src="https://m.tuniucdn.com/fb2/t1/G6/M00/46/04/Cii-TF3Zv0uIVbTyAADotliFCl4AAFs8wJBQIsAAOjO614_w640_h480_c1_t0.jpg?width=600"
      crossorigin="anonymous"
    />
    <input
      width="100"
      height="30"
      type="button"
      value="提交"
      onclick="getBase64Image()"
    />
    <canvas
      id="canvas"
      width="500"
      height="300"
      style="border: 1px solid #d3d3d3; background: #ffffff;"
    >
      Your browser does not support the HTML5 canvas tag.
    </canvas>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script src="./js/jquery.js"></script>
  <script type="text/javascript">
    function getBase64Image() {
      var imgFile = document.getElementById("imgUrl");
      imgFile["crossorigin"] = "anonymous";
      var imgUrl = imgFile.src;
      // 需要 Access-Control-Allow-Origin：*
      // add code start
      var img = new Image();
      var dataURL = ""; //base64
      img.src = imgUrl; //  + "?timeStamp=" + new Date();
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      var w = imgFile.width,
        h = imgFile.height;
      ctx.drawImage(document.getElementById("imgUrl"), 0, 0, w, h);
      var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
      dataURL = canvas.toDataURL("image/" + ext);
      console.log(dataURL);
      return dataURL;
    }
    // add code end
    /*var canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      var ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, img.width, img.height)
      var ext = img
        .src
        .substring(img.src.lastIndexOf('.') + 1)
        .toLowerCase()
      dataURL = canvas.toDataURL('image/' + ext)
      console.log(ext)
      return dataURL;
      */
  </script>
  <% if(htmlWebpackPlugin.options.config.header) { %>
  <script src="./mock/js/header.js" type="text/javascript"></script>
  <% } %>
</html>
